<template>
	<view class="add">

		<!-- 1.:model="formData" :rules="rules"这两个配合校验 2. 而ref="Form" 要配合前面两个使用-->
		<!--labelPosition 提示文字位置   label 提示文字内容 labelWidth 提示文字宽度 :labelStyle="{fontWeight:'bold',marginBottom:'20rpx'}" 提示文字自定义样式！！-->
		<!-- ref 提交校验 拿到对应标签一般是表单的dom结点（this.$refs.xx)，提交的时验证表单是否为空-->

		<!-- :value 设置打开时间选择器最开始显示的时间1.:value="nowTime" 2. nowTime:Number(new Date()) new Date() 返回当前时间对象  Number(xx) 类型转换  时间戳 -->

		<!-- 时间选择器：show ：true false 控制时间选择器的显示和隐藏  mode 时间类型 1.@close="handleCancel" 2.:closeOnClickOverlay="true"黑色遮罩层关闭事件-->
		<!-- 		<u-datetime-picker :show="show" mode="datetime" :value="nowTime" @confirm="handleConfirm" @cancel="handleCancel"
			@close="handleCancel" :closeOnClickOverlay="true"></u-datetime-picker>
 -->
		<!-- 点击按钮 显示时间选择器 -->
		<!-- <u-button text="选择时间" type="primary" @click="show=true"></u-button> -->

		<u-form :rules="rules" :model="formData" ref="Form" labelPosition="top" labelWidth="auto"
			:labelStyle="{fontWeight:'bold',marginBottom:'20rpx'}">
			<!-- 1.通行证地址输入框 -->
			<u-form-item label="通行地址" prop="address">
				<u-input clearable placeholder="请输入通行地址" v-model="formData.address"></u-input>
			</u-form-item>
			<!-- 2.申请原因 -->
			<u-form-item label="申请原因" prop="reason">
				<u--textarea clearable placeholder="请输入申请原因" v-model="formData.reason"></u--textarea>
			</u-form-item>

			<!-- 3.通行开始时间 -->
			<!-- 一个点击事件可以绑定两个事件处理函数如：@click="openTimeChooser1();hide()" 但要用分号隔开并且要加上小括号-->
			<!--    1.点击表单项 显示时间选择器 2.选择时间，拿到对应的值，变量存起来 3.通过u-input显示选择的时间 通过v-model将变量与绑定 -->
			<u-form-item prop="startTime" label="开始时间" @click="openTimeChooser1();hide()">
				<u-input placeholder="请选择开始时间" disabled disabledColor="#fff" v-model="formData.startTime"></u-input>
			</u-form-item>

			<!-- 4.通行结束时间 -->
			<u-form-item prop="endTime" label="结束时间" @click="openTimeChooser2();hide()">
				<u-input placeholder="请选择结束时间" disabled disabledColor="#fff" v-model="formData.endTime"></u-input>
			</u-form-item>

			<!-- 两个时间选择器 -->
			<!-- 开始时间选择器 value设置打开时间选择器时显示的时间 -->
			<u-datetime-picker :show="startShow" mode="datetime" :value="nowTime" @confirm="handleConfirm1"
				@cancel="handleCancel1" @close="handleCancel1" :closeOnClickOverlay="true"></u-datetime-picker>
			<!-- 结束时间选择器 -->
			<u-datetime-picker :show="endShow" mode="datetime" :value="nowTime" @confirm="handleConfirm2"
				@cancel="handleCancel2" @close="handleCancel2" :closeOnClickOverlay="true"></u-datetime-picker>
		</u-form>
		<u-button text="提交" type="primary" @click="submit" class="btn"></u-button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// nowTime: Number(new Date()),
				// show: false,
				formData: {
					// 通行地址
					address: "",
					// 通行截止时间
					endTime: "",
					// 申请原因
					reason: "",
					// 通行开始时间
					startTime: "",
					// 通行状态
					status: 0,
					// 用户id
					userId: 0
				},
				startShow: false,
				endShow: false,
				nowTime: Number(new Date()),
				// 注意：1.model属性 2.rules属性 3.rules对象配置（键是字符串'address'） 4.prop属性绑定rules对象键名（推荐写formData下的属性名）
				// 表单验证规则对象 
				rules: {
					'address': {
						// 如果 只有一个规则，写一个对象即可 多个规则 用数组【{},{},{}】数组元素是对象即可
						type: 'string',
						required: true,
						message: '请填写通行地址',
						// 不希望表单重置后还有提示，去掉change
						trigger: ['blur']
					},
					'reason': {
						type: 'string',
						required: true,
						message: '请填写通行原因',
						trigger: ['blur']
					},
					'startTime': {
						type: 'string',
						required: true,
						message: '请选择开始时间',
						// 因为输入框设置为disabled的了，所以我们不能获得焦点，只能用change
						trigger: ['change']
					},
					'endTime': [{
							type: 'string',
							required: true,
							message: '请选择结束时间',
							// 因为输入框设置为disabled的了，所以我们不能获得焦点，只能用change 
							trigger: ['change']
						},
						{
							// 自定义验证函数，
							validator: () => {
								// 上面有说，返回true表示校验通过，返回false表示不通过
								// 结束时间 大于 开始时间 返回true 否则返回 false
								return this.etime>this.stime;
							},
							// 校验不同过的提示
							message: '结束时间需要大于开始时间',
							// 触发器可以同时用blur和change
							trigger: ['change'],
						}
					]
				},
				// 开始时间时间戳
				stime:0,
				// 结束时间时间戳
				etime:0,


			}
		},
		methods: {
			// 1.点击时间选择器的 ’确认‘ 的处理方法
			handleConfirm1(e) {
				// 1.关闭事件选择器 
				this.startShow = false
				// 2.通过形参e拿到选择的时间（拿到的是时间戳 转换为正常时间格式2022-06-01）
				//时间戳的格式化 uni.$u.timeFormat(e.value, 'yyyy-mm-dd hh:MM:ss') 时间 格式
				// console.log(e.value)
				this.stime=e.value
				let time = uni.$u.timeFormat(e.value, 'yyyy-mm-dd hh:MM:ss')
				console.log(time)
				this.formData.startTime = time
				this.$refs.Form.validateField('endTime')
			},
			handleConfirm2(e) {
				// 1.关闭事件选择器 
				this.endShow = false
				// 2.通过形参e拿到选择的时间（拿到的是时间戳 转换为2022-06-01）
				//时间戳的格式化 uni.$u.timeFormat(e.value, 'yyyy-mm-dd hh:MM:ss') 时间 格式
				// console.log(e.value)
				this.etime=e.value
				let time = uni.$u.timeFormat(e.value, 'yyyy-mm-dd hh:MM:ss')
				console.log(time)
				this.formData.endTime = time
				// 手动校验
				this.$refs.Form.validateField('endTime')
			},
			// 2.点击时间选择器的 ’取消‘ 的处理方法
			handleCancel1() {
				// 隐藏时间选择器1
				this.startShow = false
				// 手动校验开始时间是否为空 提示用户 校验某个字段validateField
				this.$refs.Form.validateField('startTime')
			},
			handleCancel2() {
				// 隐藏时间选择器2
				this.endShow = false
				// 手动校验开始时间是否为空 提示用户
				this.$refs.Form.validateField('endTime')
			},
			// 3.点击表单项打开时间选择器的方法
			openTimeChooser1() {
				this.startShow = true
			},
			openTimeChooser2() {
				this.endShow = true
			},
			// 4.提交校验方法（validate()对整个表单进行校验 但对disabled的 不校验   需要用validateField对某个键名单独校验 
			submit() {
				// 1.ref 配合 2.this.$refs.xx.....检验表单是否填写完
				this.$refs.Form.validate().then(res => {
					// uni.$u.toast('校验通过')
					this.addPassInfo()

				}).catch(errors => {
					// 提示用户填完
					uni.$u.toast('请完整填写所有内容')
				})
			},
			// 4.发起添加信息请求 提交数据的方法
			addPassInfo() {
				uni.request({
					url: "http://blog.coldworld.top:8081/pass/apply",
					method: "POST",
					data: this.formData,
					success: (res) => {
						// console.log(res)
						let msg = res.data.message
						if (res.data.code == 20000) {
							uni.$u.toast('提交成功')
							// 清空表单
							this.$refs.Form.resetFields()
							setTimeout(() => {
								// 1s后跳转到pass
								uni.navigateTo({
									url: "./pass"
								})
							}, 1000)
						} else {
							uni.showToast({
								title: msg,
								icon: "error",
							})
						}
					}
				})
			},
			// 5.收起键盘的方法
			hide() {
				// console.log('收起')
				uni.hideKeyboard()
			},

		},
		onLoad() {
			let id = uni.getStorageSync('id')
			// console.log('用户id：' + id)
			// 如果id不存在，重定向到登录页，让用户登录
			// id存在，赋值
			if (id) {
				this.formData.userId = id
			} else {
				uni.showToast({
					title: "请先登录",
					icon: "error"
				})

				setTimeout(() => {
					// 1s后重定向到登录页
					uni.redirectTo({
						url: "../login/login"
					})
				}, 1000)
			}

		}

	}
</script>

<style lang="scss">
	.add {
		padding: 30rpx;

		.btn {
			margin-top: 30rpx;
		}
	}
</style>
